import React from "react";
import ProgressView from "../../../view/ProgressView";
import { Actions, NameSpace } from "../../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../../css/attendance.module.css";
import { locationTo } from "../../../utils/LocationUtil";
import * as locations from '../../../const/locations'
import { Debt,Attend,AVATAR } from "../../../const/imgs"
import Scroll from '../Bscroll/index'
import { getTOKEN, setInfo } from "../../../utils/StorageUtil";
import { dailyList } from "../../../service/AttendService"
class DailyScreen extends React.Component {
  constructor(props) {
    super(props);
    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 5;
    this.state = {
      dailyList:[]  
    };
  }
  componentDidMount(){
    this.CURRENT_PAGE = 1;
    this.getDailyList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE,
      
    })
  }
  navigate = (id) => {
    this.props.setDailyId(id)
    setInfo('dailyId',id)
    locationTo(locations.DAILY)
  }
  pullingUp = () => {
    this.getDailyList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  getDailyList = (params) =>{
    this.setState({loading:true})
    dailyList({
      token:getTOKEN(),
      is_self:this.props.isSelf,
      ...params
    })
      .then(
        res =>{
    this.setState({loading:false})
    if(res.error_code === 0){
            this.setState({
              dailyList:[...this.state.dailyList,...res.data.data]
            })
           this.current_page++ 
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  render() {
    const {
      // hasMore,
      isShowMore,
      dailyList,
      loading
    } = this.state
    return (
         <div className={styles['container']}>
        <Scroll
            ref='scroll'
            click={true}
            bounce={true}
            pullUpLoad={true}
            pullUpLoadMoreData={this.pullingUp}
            isPullUpTipHide={true}
            isShowMore={isShowMore}
          >
        <div className={styles['attend_container']}>
          <div className={styles['stat_item_w']}
            onClick={() => {
              locationTo(locations.ADD_DAILY)
            }}
          >          <div className={styles['stat_item_key']}>
              <img src={Attend.SQJL} alt='' style={{ width: '16px', marginRight: '5px' }} />
              去写日报
          </div>
            <div className={styles['stat_item_value']}>
              <img src={Debt.YJT} alt='' style={{ width: '8px' }} />
            </div>
          </div>
        </div>
        {dailyList.map((item,index)=>{
          return(
            <DailyItem key={item.id} item={item} navigate={this.navigate}/>
          )
        })}
        </Scroll>
        <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM}/>        
        
      </div>
    );
  }
}

const DailyItem = ({navigate, item:{id,date,sex,finish,user_name,}}) => {
  console.log(sex)
  return (
    <div className={styles['attend_container']}>
      <div className={styles['stat_item_w']} style={{ height: '68px' }}>
        <div className={styles['record_info']}>
          <div className={styles['record_avatar']} style={{ width: '40px', height: '40px', borderRadius: '50%' }}>
            <img src={parseInt(sex,10)===1?AVATAR.male:AVATAR.famale} alt='' style={{ width: '40px' }}/>
          </div>
          <div>
            <div className={styles['stat_item_key']} style={{ fontSize: '15px', fontWeight: '600' }}>
              {user_name}
                </div>
            <div className={styles['stat_item_value']}>
             {date}
               </div>
          </div>
        </div>
      </div>

      <div className={styles['stat_item_w']} style={{ height: '26px', fontWeight: '600' }} >
        今日完成工作
      </div>
      <div className={styles['attend_item_w']}
        style={textStyle} >
        {finish}
      </div>
      <div className={styles['stat_item_w']}>
        <div className={styles['text_center']}
          style={{
            borderTop: '0.5px solid #eee',
            color: '#ff9d03'
          }}
          onClick={() => navigate(id)}
        >
          查看全文
      </div>
      </div>
    </div>
  )
}
const textStyle = {
  height: '60px', 
  fontSize: '12px',
  lineHeight: '20px',
  color: "#9ea2ac",
  textIndent: '2rem'
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setDailyId(id) {
      let params = {
        dailyId: id,
      };
      dispatch(Actions.actionSetDailyId(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(DailyScreen);
// export default DailyScreen;
// 